O browser exibe cada elemento de acordo com a natureza do elemento.
Se é um parágrafo, como num texto, ele inalgura uma nova linha abaixo, escreve o que foi solicitado.
Este é um exemplo de elemento tipo bloco...por sua natureza são separadores ou divisores de layout.

Mas se estamos exibindo um botão, se eu quiser exibir outro botão o correto seria um ao lado do outro. E é isso que o browser faz. Chamamos esses elementos de inline e são agrupados na mesma linha, se couberem.

No entanto, há ocasiões que desejamos alterar esse layout default do browser.

Estilo bloco

O estilo bloco ocupa uma linha de maneira exclusiva pode default.
Se o estilo do elemento for em bloco e ao posicionar ele dentro da página já tiver um outro elemento a sua esquerda este será exibido na linha posterior.
Sempre que o elemento em bloco é exibido ele ocupará toda a linha e o o próximo elemento será exibido na linha posterior.

Exemplo: 1 parágrafos em seguida:

Como foi definido:
     Este é um texto antes dos parágrafos.
     <p>Este é o p1 com um estilo default(block).</p>
     Este é um texto no meio dos parágrafos.
     <p>Este é o p2 com um estilo default(block).</p>
     e este é um texto depois dos parágrafos.


Como o browser exibe:
Este é um texto antes dos parágrafos.

Este é o p1 com um estilo default(block).

Este é um texto no meio dos parágrafos.

Este é o p2 com um estilo default(block).

e este é um texto depois dos parágrafos.

Então antes de exibir o parágrafo o browser verifica se esta sendo exibido no início da linha. Se está, sem problemas, renderiza o elemento. Mas se já existe algo à esquerda renderizado o parágrafo será movido para o inicio da linha de baixo.

Exemplo 2 : Estilo bloco seguido pelo inline

Como foi definido:
<style type="text/css">
        .estiloinline {
            display: inline;
        }
    </style>

     Este é um texto antes dos parágrafos.
     <p>Este é o parágrafo 1 com um estilo default(block).</p>
     Este é um texto nom meio dos parágrafos.
     <p class="estiloinline">Este é o paragráfo 2 com um estilo inline.</p>
     e este é um texto depois dos parágrafos.

Como o browser exibe:
Este é um texto antes dos parágrafos.

Este é o parágrafo 1 com um estilo default(block).

Este é um texto nom meio dos parágrafos.

Este é o paragráfo 2 com um estilo inline.

e este é um texto depois dos parágrafos.

Nenhuma surpresa, o primeiro parágrafo foi exibido como um bloco e o segundo como um em linha.

Exemplo 3 : Estilo bloco seguido por dois estilos inline

Temos algum texto na linha e...

Este é o p1 com um estilo default(block).

Este é o p2 com um estilo inline.

Este é o p3 com um estilo inline.

e este é um texto depois dos parágrafos.
Nenhuma surpresa, o primeiro parágrafo foi exibido como um bloco e o segundo e terceiro como um em linha.

Exemplo 4 : Estilo inline seguido pelo inline

Este é o p1 com um estilo inline.

Este é o p2 com um estilo inline.

Este é o p3 com um estilo inline.

Nenhuma surpresa, todos são inline e são exibidos na mesma linha.

Exemplo 5 : Estilo inline seguido pelo block

Este é o p1 com um estilo inline.

Este é o p2 com um estilo block.

Nenhuma surpresa, antes de exibir o em bloco como existe um elemento à esquerda ele o coloca na próxima linha.


Portanto os elementos estilo inline serão exibidos uns a direita do outro se for possível
Os elementos em bloco são exibidos na mesma linha se na exibição coincidir com o início da linha ou serão exibidos na próxima linha se já existir algo à esquerda na mesma linha. Outro fato importante é que mesmo que haja espaço para renderizar o próximo elemento se o elemento anterior for tipo bloco o próximo elemento sempre será renderizado na próxima linha.

Testando em bloco em linha com divs

Note que as divs como os parágrafos são elementos, por default, em bloco
Outra coisa a ser notada é que ao colocar o estilo inline os parâmetros width e lenght da div são ignorados e ocupam o justo espaço do elemento.

Estilo bloco

Fez o que era esperado, sem novidades.

Estilo bloco seguido pelo inline

Importante : A Div2 deveria ter 100px de largura por 100px de altura (definidos pela css) mas o inline quebrou essa regra da css.

Estilo bloco seguido pelo inline-inline

Importante : A Div2 e Div3 deveriam ter 100px de largura por 100px de altura (definidos pela css) mas o inline quebrou essa regra da css. Isso se dá porque quando se colocar elementos inline cada um ocupará o espaço que precisa, nem mais nem menos .

Estilo inline seguido pelo estilo bloco

Como o o esperado ao exibir um elemento tipo bloco numa linha que já tinha elementos à esquerda a exibição foi feita na linha seguinte.